<template>
  <div class="giftShop-wrapper">
    <div class="banner-img-wrapper">
        <div class="left">
            <van-icon name="arrow-left" @click="toIndex" />
        </div>
        <div class="content-wrapper">
            <h3>不打烊的礼物店</h3>
            <span>关注</span>
            <div class="text-one" v-if="showConcise">
                <p>之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁之前和果壳合作画的一本科普绘本，主要表现出</p>
                <h5 @click="clickShowConcise">查看全文<van-icon name="arrow-down" size="10px" color="#cccccc" /></h5>
            </div>
            <div class="text-two" v-if="showDetail">
                <p>之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁.之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁。。。之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁.之前和果壳合作画的一本科普绘本，主要表现出中国不同时代集市的变迁。。。</p>
                <h5 @click="clickShowDetail">收起<van-icon name="arrow-up" size="10px" color="#cccccc" /></h5>
            </div>
            <h6>456376人喜欢</h6>
        </div>
        <div class="goods-list" v-for="item in listInfo" :key="item.id">
            <div class="img-wrapper">
                <img :src="item.imgUrl" style="width: 100%; height: 100%;" alt="">
            </div>
            <div class="text-wrapper">
                <h3>{{item.title}}</h3>
                <p>{{item.content}}</p>
                <div class="bottom">
                    <h6>{{item.month}}-{{item.day}} {{item.author}}推荐</h6>
                    <i><van-icon name="like-o" />  {{item.likeNumber}}</i>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showDetail: false,
      showConcise: true,
      listInfo: [
        {
          id: 180910,
          imgUrl: 'https://img.zcool.cn/community/01c4d95e318453a801216518d57e90.jpg@1280w_1l_2o_100sh.jpg',
          title: '纯白色，不能释怀的小情调',
          content: '世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色',
          month: 11,
          day: 4,
          author: '窝头',
          likeNumber: 2918
        },
        {
          id: 180911,
          imgUrl: 'https://img.zcool.cn/community/01bc5f5df9af2ca8012165184ef3b1.jpg@1280w_1l_2o_100sh.jpg',
          title: '纯白色，不能释怀的小情调',
          content: '世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色',
          month: 11,
          day: 4,
          author: '窝头',
          likeNumber: 2918
        },
        {
          id: 180912,
          imgUrl: 'https://img.zcool.cn/community/0143005df9af2da801216518857cce.jpg@1280w_1l_2o_100sh.jpg',
          title: '纯白色，不能释怀的小情调',
          content: '世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色',
          month: 11,
          day: 4,
          author: '窝头',
          likeNumber: 2918
        },
        {
          id: 180913,
          imgUrl: 'https://img.zcool.cn/community/013dcb5df9af2da80120a8951eeee4.jpg@1280w_1l_2o_100sh.jpg',
          title: '纯白色，不能释怀的小情调',
          content: '世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色',
          month: 11,
          day: 4,
          author: '窝头',
          likeNumber: 2918
        },
        {
          id: 180914,
          imgUrl: 'https://img.zcool.cn/community/0152ca5df9af2da80121651844973c.jpg@1280w_1l_2o_100sh.jpg',
          title: '纯白色，不能释怀的小情调',
          content: '世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色',
          month: 11,
          day: 4,
          author: '窝头',
          likeNumber: 2918
        },
        {
          id: 180915,
          imgUrl: 'https://img.zcool.cn/community/01c5a15df9af2da80120a89502ed34.jpg@1280w_1l_2o_100sh.jpg',
          title: '纯白色，不能释怀的小情调',
          content: '世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色世界上那么多色彩最不能释怀的就是白色',
          month: 11,
          day: 4,
          author: '窝头',
          likeNumber: 2918
        }
      ]
    }
  },
  methods: {
    toIndex () {
      this.$router.back()
      console.log('ddfhs')
    },
    clickShowDetail () {
      this.showDetail = !this.showDetail
      this.showConcise = true
    },
    clickShowConcise () {
      this.showDetail = !this.showDetail
      this.showConcise = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/common.scss';
.banner-img-wrapper {
    width: 100%;
    background: url('https://img.zcool.cn/community/015a435e25a8e2a80120a89548c631.jpg@1280w_1l_2o_100sh.jpg') no-repeat;
    background-size: contain;
    .left {
        position: relative;
        top: 40px;
        left: 20px;
    }
    .content-wrapper {
        width: 90%;
        background-color: #fff;
        margin: 110px auto;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        position: relative;
        padding: 10px;
        h3 {
            display: inline-block;
            font-weight: 700;
        }
        span {
            display: inline-block;
            background-color: #ffd200;
            padding: 7px 14px 7px 14px;
            border-radius: 6px;
            position: absolute;
            right: 20px;
            font-size: 14px;
        }
        .text-one {
            p {
                margin-top: 10px;
                color: #ccc;
                font-size: 14px;
                line-height: 20px;
                @include ellipsis(2);
            }
            h5 {
                display: inline-block;
                color: #ccc;
                font-size: 14px;
                margin-left: 240px;
            }
        }
        .text-two {
            p {
                margin-top: 10px;
                color: #ccc;
                font-size: 14px;
                line-height: 20px;
            }
            h5 {
                display: inline-block;
                color: #ccc;
                font-size: 14px;
                margin-left: 270px;
            }
        }
        h6 {
            color: #ccc;
            bottom: 1px;
            font-size: 14px;
        }
    }
    .goods-list {
        width: 99%;
        margin: 0px auto;
        border-radius: 10px;
        display: flex;
        margin-bottom: 20px;
        .img-wrapper {
            flex: 1;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            overflow: hidden;
        }
        .text-wrapper {
            flex: 3;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            h3 {
                flex: 1;
                font-weight: 700;
                font-size: 16px;
            }
            p {
                flex: 2;
                color: #ccc;
                font-size: 14px;
                // margin-top: 20px;
                padding-top: 10px;
                @include ellipsis(2);
            }
            .bottom {
                flex: 1;
                color: #ccc;
                h6 {
                    font-size: 12px;
                    display: inline-block;
                    // margin-top: 30px;
                    padding-bottom: 10px;
                    color: #777;
                }
                i {
                    font-size: 12px;
                    display: inline-block;
                    margin-left: 130px;
                    // margin-top: 30px;
                }
            }
        }
    }
}
</style>
